<template>
  
  <div class="container">
    <header>
        商家列表
    </header>
    <div class="businessList">
        <ul>
            <li v-for="item in businessList" :key="item.id">
                <div class="left">
                    <img :src="item.businessImg" @click="ListToBusinessInfo(item.id)">
                    <div class="business-img-quantity">
                        3
                    </div>
                </div>
                <div class="right">
                    <!-- <h3 v-text="item.businessName">万家饺子</h3> -->
                    <h3 >{{ item.businessName }}</h3>
                    <span>￥ {{item.startPrice}}起送| ￥{{ item.psPrice }}配送</span>
                    <p>各种饺子、炒菜</p>
                </div>
            </li>
        </ul>
    </div>
    <Footer></Footer>
  </div>

</template>

<script>
import Footer from '@/components/Footer.vue'

export default {

    components:{
        Footer
    },
    data(){
        return{
            typeId:this.$route.query.typeId,
            businessList:{},
        }
    },
    methods:{
        ListToBusinessInfo(businessId){
            this.$router.push({path:"/businessInfo",query:{businessId:businessId}});
        }
    },
    mounted(){
        console.log(this.typeId);
        this.businessList=[
            {
                    id:1,
                    businessImg:'/img/dcfl01.png',
                    businessName:'麦当劳',
                    startPrice:20,
                    psPrice:2,
                },
                {
                    id:2,
                    businessImg:'/img/dcfl02.png',
                    businessName:'肯德基',
                    startPrice:20,
                    psPrice:4,
                },
                {
                    id:3,
                    businessImg:'/img/dcfl03.png',
                    businessName:'华莱士',
                    startPrice:100,
                    psPrice:2,
                },
                {
                    id:4,
                    businessImg:'/img/dcfl04.png',
                    businessName:'塔斯订',
                    startPrice:20,
                    psPrice:9,
                },
                {
                    id:5,
                    businessImg:'/img/dcfl05.png',
                    businessName:'饺子',
                    startPrice:20,
                    psPrice:9,
                },
                {
                    id:6,
                    businessImg:'/img/dcfl06.png',
                    businessName:'广雅云吞',
                    startPrice:20,
                    psPrice:9,
                },
                {
                    id:7,
                    businessImg:'/img/dcfl07.png',
                    businessName:'螺蛳粉',
                    startPrice:20,
                    psPrice:9,
                },
                {
                    id:8,
                    businessImg:'/img/dcfl08.png',
                    businessName:'黄焖鸡',
                    startPrice:20,
                    psPrice:9,
                },
                {
                    id:9,
                    businessImg:'/img/dcfl09.png',
                    businessName:'塔斯订',
                    startPrice:20,
                    psPrice:9,
                },
                {
                    id:10,
                    businessImg:'/img/dcfl10.png',
                    businessName:'塔斯订',
                    startPrice:20,
                    psPrice:9,
                }
        ]
    }
    
}
</script>

<style scoped>
.container{
    width: 100%;
}

.container header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.8vw;
    z-index: 5;
    color: white;
    font-weight: 700;
}


.container .businessList{
    width: 100%;
}

.container .businessList ul{
    width: 100%;
    padding-bottom: 8.7vw;
}

.container .businessList ul li{
    width: 95%;
    display: flex;
    margin: 2vw;
    border-bottom: 0.1vw solid #666;
}

.container .businessList .left img{
    width: 20vw;
    height: 20vw;
}

.container .businessList ul li .right{
    margin: 3vw 2vw;
}

.container .businessList ul li h3{
    font-size: 3.8vw;
    color: #555;
}

.container .businessList ul li span{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw
}
.container .businessList ul li p{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw
}

.business-img-quantity{
    width: 5vw;
    height: 5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    border-radius: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 75.8vw;
    top: 13.5vw;
}







</style>